{extend name="$BASE_POPUP" /}
{block name="body"}
<link rel="stylesheet" type="text/css" href="{:ADDON_PUBLIC}/css/css.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/aliyunoss/style.css"/>


<div class="pic_head" style="padding: 0 0 8px 0;width: 96%;float: left;">
<div id="container" style="float: left;">
    <a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a>
    <a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a>
</div>
<div id="ossfile" style="padding-left: 30px;float: left;">你的浏览器不支持flash,Silverlight或者HTML5！</div>
<pre id="console"></pre>
<span id="_tips"></span>       
</div>
<div class="pic_resources">
    <div class="img_pick" id="js_grid">               
    </div>
</div>       
<div class="pagination-box" id="js_pagination">
    <span class="pagination-info">显示 <span class="js_from">0</span> 到 <span class="js_to">0</span> 项，共 <span class="js_total">0</span> 项</span>
    <div id="js_page" style="text-align:center"></div>
</div> 
<video style="display:none;" controls="controls" id="aa_video" ></video>
{/block}
{block name="script"}
<script type="text/javascript">
var getInfoUrl = getURL("loadAccess");
var ali_host = '{$host}';
</script>
<script type="text/javascript" src="__STATIC__/aliyunoss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script type="text/javascript" src="__STATIC__/aliyunoss/upload.js"></script>
<script type="text/javascript" src="__STATIC__/jquery/jquery.twbsPagination.js"></script>   
<script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
<script type="text/javascript">
    var oss_path = "{:config('aliyunoss')['host']}"+'/';
    var folder = "{$folder}";
    var checktype = "{$checktype}"; 
    var is_cut="{$is_cut}";
    var limit_num = "{$limit_num}"; //限制张数
    var first = true;
    var pic_choosed = [];//记录选择的图片

    // function ok() {
    //     var r = $(".img_pick ul li.selected");
    //     var path = "";
    //     for (var i = 0; i < r.length; i++) {
    //         if (i > 0)
    //             path += ",";
    //         path += $(r[i]).find("video").attr("data-path");
    //     }
    //     return path;
    // }
    
    function ok() {
        var r = $(".img_pick ul li.selected");
        var array = new Array();
        for (var i = 0; i < r.length; i++) {
            var video = $(r[i]).find("video");
            var c = {path:video.attr("data-path"),length:video.attr("data-time")}
            array.push(c) ;
        }
        return array;
    }
    
    function hasSelected(id) {
        var match_str = ',' + id + ',';
        var ids_str = '';
        for (var k in pic_choosed) {
            if (ids_str != '')
               ids_str += ','; 
            ids_str += pic_choosed[k].id;
        }
        ids_str = ',' + ids_str + ',';
        if (ids_str.indexOf(match_str) >= 0) {
            return true;
        } else {
            return false;
        }
    }
    $("#js_grid").on("click", ".js_delete", function (e) {
        var that = this;
        confirm("删除后不可恢复，确认要删除吗？", function () {            
            var url = getURL("del");
            var id=$(that).attr("data-id");
            $.getJSON(url, {id: id}, function (json) {                
                if (json.success)
                    location.reload();
                else
                    alert(json.message);
            });
        });
        e.stopPropagation();
    });
    $(".img_pick").on("click", " ul li", function () {
        var item = new Object();
        if (checktype == "2") {
            //多选
            if ($(this).hasClass("selected")) {
                $(this).removeClass("selected");
                for (var key in pic_choosed) {
                    if (pic_choosed[key].id == item.id) {
                        pic_choosed.splice(key,1);
                        break;
                    }
                }
            } else {
                //pic_choosed.length 已选数量
                //limit_num 可选数量限制
                if (limit_num == '' || pic_choosed.length < limit_num) {
                    $(this).addClass("selected");
                    pic_choosed.push(item);
                } else {
                    alert('达到可选图片数量上限');
                }
            }
        } else {
            //单选
            $(".img_pick ul li").removeClass("selected");
            $(this).addClass("selected");
            pic_choosed = [];
            pic_choosed.push(item);
        }
    });
    window.onload = function () {
        var tips = parent._upload_tips;
        if (tips) {
            $("#_tips").html(tips);
        }
    };

    var pageSize = 18;
    var first = true;
    $(function () {
        if (limit_num) {
            limit_num = parseInt(limit_num);
        }
    
        loadData(1);
    });
    function loadData(page) {
        showLoading("加载数据中...");
        var url = getURL("loadList");
        $.getJSON(url, {page: page, rows: pageSize, folder: folder}, function (json) {
            bindData(page, json);
            if (first) {
                var totalPage = Math.ceil(json.total / pageSize);
                $('#js_page').twbsPagination({
                    totalPage: totalPage,
                    visiblePage: 5,
                    onPageClick: function (event, page) {
                        if (!first)
                            loadData(page);
                    }
                });
                first = false;
            }
            hideLoading();
        });
    }

    function bindData(page, data) {
        var html = '';
        if (data.total > 0) {
            html += '<ul>';
            var len = data.rows.length;
            for (var i = 0; i < len; i++) {
                var row = data.rows[i];
                html += '<li>';
                html += '<div class="img_box"><video style="height:120px;" data-time="' +  row['video_time'] + '" data-path="' + oss_path + row['file_path'] + '" src="'+ oss_path +row['file_path'] + '"></video>  </div>';
                if(row['alias_name']){
                    html += '<span class="lbl_content">' + row['alias_name'] + '</span>';
                }else{
                    html += '<span class="lbl_content">' + row['file_name'] + '</span>';
                }
                html += ' <a href="javascript:;" data-id="' + row['id'] + '" class="del_pic"><i data-id="' + row['id'] + '" class="icon wb-trash js_delete right"></i></a>';
                html += '<div class="selected_mask"><div class="selected_mask_inner"></div><div class="selected_mask_icon"><i class="icon wb-check"></i></div></div>';
                html += '</div>';
                html += '</li>';
            }
            html += '</ul>';
            $("#js_pagination").show();
            var from = (parseInt(page) - 1) * parseInt(pageSize) + 1;
            var to = from + len - 1;
            if (data.total < 1)
                from = to = 0;
            $(".js_from").html(from);
            $(".js_to").html(to);
            $(".js_total").html(data.total);
        } else {
            $("#js_pagination").hide();
            html = ' <div style="text-align:center;margin-top:100px">无相关素材信息!</div>';
        }
        $("#js_grid").html(html);
    }
</script>
{/block}